<template>
	<div class="gui-container">
		<el-dialog v-model="isShowDialog" title="新增区域" width="469px" :center="false">
			<el-card shadow="hover">
				<el-form :model="from" size="medium">
					<el-row :gutter="35">
						<el-col class="mb20">
							<el-form-item label="区域编号" label-width="70px">
								<el-input v-model="from.code" placeholder="请输入..." clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col class="mb20">
							<el-form-item label="区域名称" label-width="70px">
								<el-input v-model="from.name" placeholder="请输入..." clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col class="mb20">
							<el-form-item label="库区号" label-width="70px">
								<el-input v-model="from.warehouseNo" placeholder="请输入..." clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col class="mb20">
							<el-form-item label="排序" label-width="70px">
								<el-input-number v-model="from.orderBy" clearable></el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="ckSubmitData">保存</el-button>
					<el-button @click="isShowDialog = false">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { save, queryById } from '/@/api/store/area';


export default {
	components: {},
	emits: ['reload'],
	setup(props, { emit }) {
		const state = reactive({
			isShowDialog: false,
			from: {
				id: 0,
				name: '',
				code: '',
				warehouseNo: '1',
				orderBy: 0,
			},
		});

		async function ckSubmitData() {
			await save(state.from).then((res: any) => {
				if (res.success) {
					state.isShowDialog = false;
					emit('reload');
					ElMessage({ message: '操作成功', type: 'success' });
				} else {
					ElMessage({ message: '操作失败', type: 'error' });
				}
			});
		}

		async function openDialog(id: number) {
			if (id > 0) {
				state.from.id = id;
				await queryById(id).then((res: any) => {
					if (res.success) {
						const data = res.data;
						state.from.id = data.id;
						state.from.name = data.name;
						state.from.code = data.code;
						state.from.warehouseNo = data.warehouseNo;
						state.from.orderBy = data.orderBy;
					}
				});
			} else {
				state.from.id = 0;
				state.from.name = '';
				state.from.code = '';
				state.from.warehouseNo = '1';
				state.from.orderBy = 1;
			}

			state.isShowDialog = true;
		}

		return {
			openDialog,
			ckSubmitData,
			...toRefs(state),
		};
	},
};
</script>
